data.cname<!-- NewTeacherHomeWork.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>教师端首页</title>
	<link rel="stylesheet" href="../../css/mui.min.css"/>
	<link rel="stylesheet" href="../../css/base.css"/>
	<style type="text/css">
		.mui-card{
			margin: 0;
		}
		.train-div{
			background-color: white;
			padding: 30px 10px;
		}
		.train-top-image{
			width: 100%;
			background-image: url(../../image/course_placehoder.png);
		}
		.train-image{
			width: 40px;
			height: 40px;
			float: right;
			background-image: url(../../image/course_placehoder.png);
		}
		.train-title{
			overflow: hidden;
		 	text-overflow: ellipsis;
		 	display: -webkit-box;
		 	-webkit-line-clamp: 2;
		 	-webkit-box-orient: vertical;
		 	padding-right: 10px;
		}
		.train-cell{
			padding: 6px 10px;
		}
		.sub-div{
			vertical-align:middle;
			display:table-cell;
		}
		.father-div{
			display:table;
			height: 40px;
		}
		.train-top-title{
			position: absolute;
			bottom: 10px;
			left: 10px;
			font-size: 14px;
			color: white;
			padding: 6px 10px;
			line-height: 1.2em;
			background-color: rgba(0,0,0,0.5);
			text-align: center;
			width:calc(100% - 20px);
			overflow: hidden;
		 	text-overflow: ellipsis;
		 	white-space: nowrap;
		}
		.course-div{
			margin-top: 6px;
		}
		.course-top-title{
			padding: 20px;
			line-height: 1em;
			text-align: center;
			margin: 0;
		}
		.dian-tag{
			text-decoration: underline;
		}
		.mui-table-view .mui-media-object.mui-pull-left{
			margin-right: 12px;
		}
		.mui-table-view-cell>a:not(.mui-btn) .course-img{
			display:block;
			width: 136px;
			max-width: 136px;
			height: 84px;
			background-image: url(../../image/course_placehoder.png);
			background-size: 136px 84px;
		}
		.mui-table-view-cell .top-content{
			height: 64px;
		}
		.mui-table-view-cell .bottom-content{
			height: 20px;
		}
		.mui-table-view-cell>a:not(.mui-btn){
			padding: 10px;
		}
		.mui-table-view-cell>a:not(.mui-btn) .course_title{
			overflow: hidden;
		 	text-overflow: ellipsis;
		 	white-space: pre-wrap;
		 	display: -webkit-box;
		 	-webkit-line-clamp: 2;
		 	-webkit-box-orient: vertical;
		 	font-size: 16px;
		 	color: #666;
		 	line-height: 20px;
		}
		.mui-table-view-cell>a:not(.mui-btn) .subtitle{
			color: #999;
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		 	line-height: 14px;
		}
		.tag-img{
			width: 12px;
			height: 12px;
			margin-right: 4px;
		}
		.top-p{
			margin-top: 10px;
		}
		.bottom-p{
			margin-top: 6px;
		}
		.info-span{
			margin-left: 20px;
		}
	</style>
</head>
<body class="">
	<div class="train-div mui-table-view">
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell train-cell">
					<div>
						<img class="train-top-image" src="../../image/firstNewsTitls1.png">
						<p class="train-top-title">
							4SEM教学培训计划4SEM教学培训计划4SEM教学培训计划4SEM教学培训计划
						</p>
					</div>
				</li>
				<li class="mui-table-view-cell train-cell">
					<img class="train-image" src="../../image/firstNewsTitls1.png">
					<div class="father-div">
						<div class="sub-div">
							<p class="base_black_grey base_content_font train-title">
								长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题长标题
							</p>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell train-cell">
					<img class="train-image" src="../../image/firstNewsTitls1.png">
					<div class="father-div">
						<div class="sub-div">
							<p class="base_black_grey base_content_font train-title">
								短标题
							</p>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell train-cell">
					<img class="train-image" src="../../image/firstNewsTitls1.png">
					<div class="father-div">
						<div class="sub-div">
							<p class="base_black_grey base_content_font train-title">
								短标题
							</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="course-div mui-table-view">
		<div class="mui-table-view">
			<p class="course-top-title base_black_grey base_title_font">
				精品
				<span class="dian-tag">
					·
				</span>
				公开课
			</p>
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left course-img" src="../../image/list-default.png"/>
					<div class="mui-media-body top-content">
						<p class="course_title">课程名称:货物出库作业</p>
						<div class="top-p">
							<p class="mui-ellipsis subtitle">
								授课老师：宁铁娜 刘燕玲 王淑荣
							</p>
						</div>
					</div>
					<div class="mui-media-body bottom-content">
						<div class="bottom-p">
							<p class="mui-ellipsis subtitle">
								<span class="left-span"><img class="tag-img" src="../../image/icon_ren.png">100人</span>
								<span class="info-span"><img class="tag-img" src="../../image/icon_shijian.png">10条</span>
							</p>
						</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	
</script>
</html>